<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	div {
		font-size: 14px;
		line-height: 24px;
		width: 500px;
		margin: 0 auto;
	}
</style>
</head>

<body>
<!--单行截取-->
<div class="p1">字符截取文本限制字符截取文本限制字符截取文本限制字符截取文本限制字符截取文本限制字符截取文本限制字符截取文本限制字符截取文本限制</div>
<p><br /></p>
<!--多行截取-->
<div class="p2">字符截取文本限制字符截取文本限制字符截取文本限制字符截取文本限制字符截取文本限制字符截取文本限制字符截取文本限制字符截取文本限制</div>
<script type="text/javascript">
	(function ($) {
		$.fn.charLimit = function (n) {
			$(this).each(function () {
				var maxwidth = n;
				charLimitMax(this, maxwidth);
			});
		};

		function charLimitMax(i, o) {
			if ($(i).text().length > o) {
				$(i).text($(i).text().substring(0, o));
				$(i).html($(i).html() + "...");
			};
		};
	})(jQuery);
	$(".p1").charLimit(20);
	$(".p2").charLimit(50);
</script>
</body>
</html>
